import React from 'react';
import classnames from 'classnames';

import styles from './index.less';

const DEFAULT_DATA = [
  { value: 'create', meaning: '新建' },
  { value: 'transferred', meaning: '已转单' },
  { value: 'served', meaning: '已服务' },
  { value: 'closed', meaning: '已关闭' },
];
const CustomStep = props => {
  const { stepDataArr = DEFAULT_DATA, activeKey } = props;

  const innerActiveKey = activeKey ?? 'create';

  return (
    <div className={styles.stepsWrapper}>
      {stepDataArr?.map(item => {
        return (
          <div
            className={classnames(styles.stepCon, {
              [styles.active]: innerActiveKey === item.value,
            })}
            key={item.value}
          >
            {item.meaning}
          </div>
        );
      })}
    </div>
  );
};

export default CustomStep;
